<template>
    <!-- 会员信息展示 -->
    <div class="flex items-center justify-between mb-2 px-1">
        <div class="flex items-center">
            <el-icon class="text-gray-400 mr-1">
                <Trophy />
            </el-icon>
            <span class="text-gray-600 text-xs">免费版</span>
        </div>
        <el-button type="primary" size="small" link class="text-xs text-blue-500" >
            升级会员
        </el-button>
    </div>
    <!-- 底部信息 -->
    <div class="p-3 md:p-4 border-t-2 border-neutral-200 mt-auto w-full">
        <div class="flex items-center cursor-pointer relative" @click.stop="toggleDropdown">
            <img :src="userInfo.avatar" alt="头像" class="h-8 w-8 rounded-full">
            <div class="flex flex-col ml-2 overflow-hidden">
                <span class="text-gray-700 text-xs md:text-sm truncate">{{userInfo.username}}</span>
                <span class="text-gray-400 text-[10px] md:text-xs truncate">{{userInfo.mobile}}</span>
            </div>

            <!-- 下拉菜单 -->
            <div v-if="showDropdown" v-click-outside="closeDropdown"
                class="absolute bottom-full left-0 md:left-72 w-[250px] bg-white rounded-lg shadow-lg py-2 mb-2 z-[9999]">
                <div class="px-4 py-2 text-sm text-gray-500">当前账户</div>
                <div class="px-4 py-2">
                    <div class="flex items-center bg-gray-100 p-3 rounded-lg">
                        <img :src="userInfo.avatar" alt="头像" class="h-7 w-7 rounded-full mr-2">
                        <div class="flex flex-col">
                            <span class="text-gray-700 text-xs md:text-sm">{{userInfo.username}}</span>
                            <span class="text-gray-400 text-[10px] md:text-xs">{{userInfo.mobile}}</span>
                        </div>
                    </div>
                </div>
                <router-link to="/profile" class="px-4 py-2 hover:bg-gray-50 block">
                    <div class="flex items-center">
                        <el-icon class="mr-2">
                            <User />
                        </el-icon>
                        <span class="text-xs md:text-sm text-gray-700">个人中心</span>
                    </div>
                </router-link>
                <div class="px-4 py-2 hover:bg-gray-50 cursor-pointer">
                    <div class="flex items-center">
                        <el-icon class="mr-2">
                            <Help />
                        </el-icon>
                        <span class="text-xs md:text-sm">帮助中心</span>
                    </div>
                </div>
                <div class="px-4 py-2 border-t border-gray-100 mt-2 cursor-pointer" @click="outLogin">
                    <div class="flex items-center text-red-500">
                        <el-icon class="mr-2">
                            <SwitchButton />
                        </el-icon>
                        <div class="hover:bg-gray-50 text-xs md:text-sm">退出登录</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { User, Help, SwitchButton, Trophy } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { userApi } from '@/api' 
import defaultAvatar from '@/assets/images/avatar.png'
import { getUserInfo } from '@/utils/auth'

// 判断头像
const imgUrl = import.meta.env.VITE_IMG_BASE_URL || ''

// 添加自定义指令
const vClickOutside = {
    mounted(el, binding) {
        el._clickOutside = (event) => {
            if (!(el === event.target || el.contains(event.target))) {
                binding.value(event)
            }
        }
        document.addEventListener('click', el._clickOutside)
    },
    unmounted(el) {
        document.removeEventListener('click', el._clickOutside)
    }
}

const props = defineProps({
    collapsed: {
        type: Boolean,
        default: false
    }
})

const router = useRouter()
const showDropdown = ref(false)

// 切换下拉菜单
const toggleDropdown = (e) => {
    e.stopPropagation()
    showDropdown.value = !showDropdown.value
}

// 关闭下拉菜单
const closeDropdown = () => {
    showDropdown.value = false
}



// 退出登录
const outLogin = async (e) => {
    e.stopPropagation() // 阻止事件冒泡
    try {
        await userApi.logout()

        localStorage.removeItem('userInfo')
        localStorage.removeItem('Authorization')

        ElMessage.success('操作成功')
        setTimeout(() => {
            router.push('/login')
        }, 2000)

    } catch (error) {
        ElMessage.error('操作失败，请重试')
    }
}

const userInfo = ref({
    username: '',
    avatar_url: '',
    avatar: '',
    mobile: '',
})

onMounted(() => {
    const userInfoStr = getUserInfo()
    if (userInfoStr) {
        userInfo.value = userInfoStr
    }

    if (!userInfo.value.avatar_url || userInfo.value.avatar_url === 'null') {
        userInfo.value.avatar = defaultAvatar
    } else {
        userInfo.value.avatar = imgUrl + userInfo.value.avatar_url
    }
});
</script>
<style scoped>
.el-button--small {
    padding: 4px 8px;
}
</style>